<template>
  <div>
    <div class="search">
      <!-- {{ form }} -->
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-row>
          <el-col :span="20">
            <el-form-item>
              <el-select clearable v-model="form.categoryId" placeholder="请选择课程类别">
                <el-option v-for="item in categories" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select clearable v-model="form.status" placeholder="请选择我们的状态">
                <el-option label="评价中" value="评价中"></el-option>
                <el-option label="待评价" value="待评价"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input clearable v-model="form.name" placeholder="课程名字"></el-input>
            </el-form-item>
            <el-form-item>
              <el-select clearable v-model="form.teacherId" placeholder="请选择授课教师">
                <el-option v-for="item in teacherCategories" :key="item.id" :label="item.realname"
                  :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-button @click="toPublish" type="primary">发布课程</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

    </div>

    <!-- 表格开始 -->
    <div class="table">
      <el-table :data="courseData" style="width: 100% ;">
        <el-table-column type="index" :index="1" label="序号" width="100" align="center">
        </el-table-column>
        <el-table-column label="课程封面" width="200" align="center">
          <template v-slot="scope">
            <div>
              <img height="120px" width="80px" :src="scope.row.url" alt="">
            </div>
          </template>
        </el-table-column>
        <el-table-column label="课程名字" width="150">
          <template v-slot="scope">
            <div>
              <div>{{ scope.row.name }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="课程描述" width="250">
          <template v-slot="scope">
            <div style="width: 200px;">
              <div>{{ scope.row.description }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="其他信息" width="200" align="center">
          <template v-slot="scope">
            <div>
              <div>授课教师 :{{ scope.row.realname }}</div>
              <div>发布时间 :{{ Number(scope.row.publish_time) | fmtDate }}</div>
              <div>课程发布人 :{{ scope.row.issuer }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="课程状态" width="200" align="center">
          <template v-slot="scope">
            <div>
              <el-tag v-if="scope.row.status === '评价中'" type='success'>评价中</el-tag>
              <el-tag v-else type='danger'>待评价</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" align="center">
          <template v-slot="scope">
            <div>
              <el-link @click="toEdit(scope.row)" :underline="false" type='success'>修改</el-link>
              <el-link @click="toToggle(scope.row.id, '待评价')" :disabled="scope.row.status !== '待评价'" :underline="false"
                style="margin-left: 10px; " type="primary">开启评价</el-link><br>
              <el-link :underline="false" type="danger" @click="toDelete(scope.row.id)">删除</el-link>
              <el-link @click="toToggle(scope.row.id, '评价中')" :disabled="scope.row.status !== '评价中'" :underline="false"
                style="margin-left: 10px; " type="primary">结束评价</el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page" style="margin-top:15px">
      <el-pagination hide-on-single-page background @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :current-page="params.page" :page-sizes="[4, 8, 12, 16]"
        :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>


  </div>
</template>
<script>
import { get } from '@/utils/request'
import { post } from '@/utils/request'
export default {
  data() {
    return {
      // 教师栏目
      teacherCategories: {},
      // 根据条件查询表单对象
      form: {},
      // 保存所有栏目
      categories: [],
      // 课程数据源
      courseData: [],
      // 分页对象
      params: {
        page: 1,
        pageSize: 4
      },
      // 数据总条数
      total: 0,
      // 点击审核接收当前被点击审核对象
      rowArticle: {},
      // 控制模态框显示与隐藏变量
      visible: false
    }
  },
  methods: {
    // 获取导师数据
    async getTeachers() {
      let res = await get('/user/teachers')
      console.log(res.data.list);
      this.teacherCategories = res.data.list
    },
    // 删除课程
    toDelete(id) {
      console.log(id);
      this.$confirm('此操作将删除此课程, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await get('/course/deleteById', { id })
        if (res.status === 200) {
          this.getCourse()
          console.log(res);
          this.$message({
            type: 'success',
            message: res.message
          });
        } else {
          this.$message.error(res.message)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    toEdit(row) {
      this.$router.push({
        path: '/coursemanage/toPublish',
        query: row
      })
    },
    toPublish() {
      this.$router.push({
        path: '/coursemanage/toPublish'
      })
    },
    // 切换状态
    // 切换状态
async toToggle(id, status) {
  try {
    // 显示确认对话框
    await this.$confirm('此操作将更改评价状态, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    });

    // 发送请求更改状态
    let res = await post('/course/changeStatus', { id, status });

    // 检查响应状态码
    if (res.status === 200) {
      // 显示成功通知
      this.$notify({
        title: '成功',
        message: '切换评价状态成功',
        type: 'success'
      });
    } else {
      // 显示错误通知
      this.$notify.error({
        title: '失败',
        message: '切换失败',
        type: 'error'
      });
    }

    // 重新获取课程列表
    this.getCourse();
  } catch (error) {
    // 处理取消操作或其他错误
    this.$notify({
      title: '取消更改',
      type: 'info',
      message: '已取消更改'
    });
  }
},
    async getCourseCategory() {
      let res = await get('/course/findAll')
      // console.log(res);
      this.categories = res.data
    },
    // 分页多条件获取课程信息
    async getCourse() {
      // 将分页对象属性和条件对象属性传给后端
      let temp = {
        ...this.params,//必传
        ...this.form
      }
      // 判断条件是否存在 存在传给后端  不存在删除条件
      for (let key in temp) {
        if (!temp[key]) {
          delete temp[key]
        }
      }
      let res = await get('course/pageQueryFind', temp)
      console.log(res);
      this.courseData = res.data.list;
      this.total = res.data.total
    },
    // 每页大小触发的方法  5条一页变成10条一夜
    handleSizeChange(pageSize) {
      // pageSize由5改为10
      this.params.page = 1
      this.params.pageSize = pageSize;
      this.getCourse()
    },
    // 页面发生改变触发方法
    handleCurrentChange(page) {
      this.params.page = page;
      this.getCourse()
    },
  },
  // 监听form
  watch: {
    // form(){
    //   this.getArticle()
    // }
    form: {
      handler() {
        this.params.page = 1;
        this.getCourse()
      },
      deep: true
    }
  },
  created() {
    this.getCourseCategory()
    this.getCourse()
    this.getTeachers()
  },
}
</script>